<template>
  <view
    ><view class="box" @click="goPage('/pages/shop/xmDetails')">
      <image src="@/static/home/xm.png" mode="aspectFill" />
      <view class="first">
        <view class="label">皮肤专业护理</view>
        黄金热拉提2.0 全面部</view
      >
      <view class="first">紧致提升｜K衰维养</view>
      <view class="userInfo">
        <u-avatar size="18"></u-avatar>
        <view style="margin: 0 10rpx">杭州艺星医疗美...</view>
        <view class="label">金牌加盟商</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
</script>
<style lang="less" scoped>
.box {
  width: 530rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  flex-shrink: 0;

  .first {
    display: flex;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 10rpx;
    .label {
      background: rgba(43, 87, 231, 0.1);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 20rpx;
      color: #2368f1;
      padding: 5rpx;
      margin-right: 10rpx;
    }
  }
  .userInfo {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #8a8a8d;
    .label {
      background: #fff0c3;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #563010;
      padding: 5rpx 8rpx;
      margin-left: 26rpx;
    }
  }
  image {
    width: 100%;
    height: 240rpx;
  }
}
</style>
